<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1 id="h1">
			9:20 loading......
			<span id="span"></span>
		</h1>
		<script>
			setInterval(function(){
				var d1 = new Date()
				var d2 = new Date("2021-9-15 9:20")
				var t = d2.getTime() - d1.getTime()
				span.innerText = t
			},10)
		</script>
		<!-- 
		 DOM 能干啥
		 1、获取标签
		 2、操作元素的内容
		 3、操作标签的属性
		 4、操作标签的样式（css）
		 5、元素的事件操作
		 -->
		 
		 <img src="img/ganlai.gif" alt="" width="100" aaa="123456">
		 <img src="" alt="">
		 <script type="text/javascript">
		 	/* 操作属性 ： 
				获取属性值：直接调用标签的属性名称 class---className
				设置属性值：直接调用标签的属性名称进行设置
				
			以上操作适用于标签的标准属性，但是自定义属性不能这么操作。
			
			属性操作的通用方式：
			getAttribute(属性名)  获取指定的属性值
			setAttribute(属性名，属性值) 给指定的属性设置值
			 */
			// 获取 元素
			var img1 = document.querySelectorAll("img")[0]
			var img2 = document.querySelectorAll("img")[1]
			
			// 读取标签的属性值
			var aaa = img1.getAttribute("aaa")
			var src = img1.getAttribute("src")
			console.log(aaa)
			console.log(src)
			// 设置属性值 (属性的名称，属性的值)
			img2.setAttribute("src",src) // 设置src 属性
			img2.setAttribute("aaa",aaa) // 设置aaa属性
			img2.setAttribute("width",100)// 设置width属性
		 </script>
	</body>
</html>


